<template>
  <div class="content">
    <!-- 引入头部组件 -->
    <div class="header">
      <undoneOrders @sonChange="fatherChange"></undoneOrders>
    </div>

    <div class="undoneOrders">
      <!-- 订单状态tab切换 -->
      <van-tabs v-model="active"
                @change="changeTab">
        <van-tab v-for="item in tabsList"
                 :key="item"
                 :title="item">
          <!-- 订单列表 -->
          <div class="orderList">
            <!-- 订单item卡片demo -->
            <div v-for="item in arr"
                 :key="item.id"
                 class="orderItem">
              <!-- 用户收货信息 -->
              <div class="user">
                <div class="userInfo">
                  <div class="username">{{item.username}}</div>
                  <div class="icon">
                    <van-icon name="location" />
                    <a :href="'tel:' + 18482315704"
                       style="color:#333">
                      <van-icon name="phone" />
                    </a>
                  </div>
                </div>
                <div class="address">{{item.address}}</div>
              </div>
              <!-- 平台专送？商家配送 -->
              <!-- 【待处理】状态1-->
              <div v-if="item.state === '1'"
                   class="order_state">
                <div class="order_state_left">
                  <div class="order_time">
                    <span>{{item.time}}</span>
                    <span>{{item.personState}}</span>
                  </div>
                  <div class="bgc_words">
                    <span v-if="deliveryMethod=== '1'"
                          class="P_bgc">外卖配送</span>
                    <span v-if="deliveryMethod === '2'"
                          class="S_bgc">到店自取</span>
                    <span class="b_word">9分钟后订单关闭</span>
                  </div>
                </div>
                <div class="order_state_right">
                  <!-- 订单跟踪 -->
                  <van-cell is-link
                            @click="showFollowHandel">
                    <span id="follow">订单跟踪</span>
                  </van-cell>
                </div>
              </div>
              <!-- 【未取货】状态2 -->
              <div v-if="item.state === '2'"
                   class="order_state">
                <div class="order_state_left">
                  <div class="order_time">
                    <span>{{item.time}}</span>
                    <span>{{item.personState}}</span>
                  </div>
                  <div class="bgc_words">
                    <span v-if="deliveryMethod=== '1'"
                          class="P_bgc">外卖配送</span>
                    <span v-if="deliveryMethod === '2'"
                          class="S_bgc">到店自取</span>
                    <span class="b_word">9分钟后订单关闭</span>
                  </div>
                </div>
                <div class="order_state_right">
                  <!-- 订单跟踪 -->
                  <van-cell is-link
                            @click="showFollowHandel">
                    <span id="follow">订单跟踪</span>
                  </van-cell>
                </div>
              </div>
              <!-- 【配送中】状态3 -->
              <div v-if="item.state === '3'"
                   class="order_state">
                <div class="order_state_left">
                  <div class="order_time">
                    <span>{{item.time}}</span>
                    <span>{{item.personState}}</span>
                  </div>
                  <div class="bgc_words">
                    <span v-if="deliveryMethod=== '1'"
                          class="P_bgc">外卖配送</span>
                    <span v-if="deliveryMethod === '2'"
                          class="S_bgc">到店自取</span>
                    <!-- <span class="b_word">9分钟后订单关闭</span> -->
                    <span class="b_word">骑手：{{item.person}}送</span>
                    <span>
                      <van-icon name="location" />
                    </span>
                    <span>
                      <van-icon name="phone" />
                    </span>
                  </div>
                </div>
                <div class="order_state_right">
                  <!-- 订单跟踪 -->
                  <van-cell is-link
                            @click="showFollowHandel">
                    <span id="follow">订单跟踪</span>
                  </van-cell>
                </div>
              </div>
              <!-- 【待审核】状态4 -->
              <div v-if="item.state === '4'"
                   class="order_state">
                <div class="order_state_left">
                  <div class="order_time">
                    <span>{{item.time}}</span>
                    <span>{{item.personState}}</span>
                  </div>
                  <div class="bgc_words">
                    <span v-if="deliveryMethod=== '1'"
                          class="P_bgc">外卖配送</span>
                    <span v-if="deliveryMethod === '2'"
                          class="S_bgc">到店自取</span>
                    <span class="b_word">9分钟后订单关闭</span>
                  </div>
                </div>
                <div class="order_state_right">
                  <!-- 订单跟踪 -->
                  <van-cell is-link
                            @click="showFollowHandel">
                    <span id="follow">订单跟踪</span>
                  </van-cell>
                </div>
              </div>
              <!-- 商品图片数量展示 -->
              <div class="imgNum">
                <div v-if="item.imgList.length <= 3"
                     class="imgList">
                  <div class="imgBox"
                       v-for="itemImg in item.imgList"
                       :key="itemImg.id"><img :src="itemImg.src"
                         alt="">
                  </div>
                </div>
                <div v-if="item.imgList.length > 3"
                     class="imgList">
                  <div class="imgBox"
                       v-for="itemImg in item.imgList.slice(0,3)"
                       :key="itemImg.id"><img :src="itemImg.src"
                         alt="">
                  </div>
                  <div class="imgDot"
                       @click="showGoodsPopup(item)">
                    ...
                  </div>
                </div>
                <div class="num_icon">
                  <div class="num">
                    <van-cell is-link
                              @click="showGoodsPopup(item)">
                      <span class="num">共{{item.imgList.length}}件商品</span>
                    </van-cell>
                  </div>
                  <div class="n_icon">
                    <span>
                      <van-icon name="arrow" />
                    </span>
                  </div>
                </div>
              </div>
              <!-- 发票信息 -->
              <!-- 【待处理】发票 状态1 -->
              <div v-if="item.state === '1'"
                   class="receipt">
                <span>发票信息</span>
                <span>{{item.need}}</span>
              </div>
              <!-- 【未取货】发票 状态2 -->
              <div v-if="item.state === '2'"
                   class="receipt">
                <span class="receiptInfo">发票信息</span>
                <van-cell is-link
                          @click="showReceipt">
                  <span class="look">查看</span>
                </van-cell>
              </div>
              <!-- 【配送中】发票 状态3 -->
              <div v-if="item.state === '3'"
                   class="receipt">
                <span>发票信息</span>
                <span>{{item.need}}</span>
              </div>
              <!-- 【待审核】发票 状态4 -->
              <div v-if="item.state === '4'"
                   class="returnMoney">
                <div class="apply">顾客申请退款</div>
                <div class="colorIcon">
                  <span>
                    <van-icon name="clock-o" />
                  </span>
                  <van-cell is-link
                            @click="showtimeHandle">
                    <span class="timeHandle"
                          @click="timeHandle">剩{{item.time}}分钟处理</span>
                  </van-cell>
                </div>

              </div>
              <div class="receipt">
                <span>发票信息</span>
                <span>{{item.need}}</span>
              </div>

              <!-- 技术服务费 -->
              <div class="service">
                <span>技术服务费</span>
                <span>{{item.service}}</span>
              </div>
              <!-- 本单预计收入 -->
              <div class="income">
                <span>本单预计收入</span>
                <span class="redColor">{{item.income}}</span>
              </div>

              <!-- 【待处理】订单信息 状态1 -->
              <!-- 订单信息 -->
              <div v-if="item.state === '1'"
                   class="orderInfo1">
                <div>
                  <span>订单编号：</span>
                  <span>{{item.num2}}</span>
                </div>
                <div @click="tradeInfo(item.imgList)">
                  <span>交易快照：发生争议时，可作为判断依据</span>
                  <span>
                    <van-icon name="arrow" />
                  </span>
                </div>
                <div>
                  <span>下单时间：</span>
                  <span>{{item.payTime}}</span>
                </div>
              </div>
              <!-- 【未取货】订单信息 状态2 -->
              <div v-if="item.state === '2' || item.state === '4'"
                   class="orderInfo">
                <div class="orderInfo_left">
                  <div>
                    <span>订单编号：</span>
                    <span>{{item.num2}}</span>
                  </div>
                  <div @click="tradeInfo(item.imgList)">
                    <span>交易快照：发生争议时，可作为判断依据</span>
                    <span>
                      <van-icon name="arrow" />
                    </span>
                  </div>
                  <div>
                    <span>下单时间：</span>
                    <span>{{item.payTime}}</span>
                  </div>
                </div>
                <div class="orderInfo_right">#11</div>
              </div>
              <!-- 【配送中】订单信息 状态3 -->
              <div v-if="item.state === '3'">
                <div class="colorIcon">
                  <span>
                    <van-icon name="underway-o" />
                  </span>
                  <span>配送已超时</span>
                  <span>14'03''</span>
                </div>
                <div class="pinkIcon">
                  <span>
                    <van-icon name="bulb-o" />
                  </span>
                  <span>{{item.time}}</span>
                  <span>用户发起催单</span>
                </div>
                <div class="orderInfo">
                  <div class="orderInfo_left">
                    <div>
                      <span>订单编号：</span>
                      <span>{{item.num2}}</span>
                    </div>
                    <div @click="tradeInfo(item.imgList)">
                      <span>交易快照：发生争议时，可作为判断依据</span>
                      <span>
                        <van-icon name="arrow" />
                      </span>
                    </div>
                    <div>
                      <span>下单时间：</span>
                      <span>{{item.payTime}}</span>
                    </div>
                  </div>
                  <div class="orderInfo_right">#11</div>
                </div>
              </div>

              <!-- 【待处理】 按钮 状态1 -->
              <!-- 关闭交易 -->
              <div class="close"
                   v-if="item.state === '1'">
                <van-cell is-link
                          @click="showPopup">
                  <button class="close_model">关闭交易</button>
                </van-cell>
              </div>
              <!-- 【待审核】 按钮  状态4 -->
              <div class="clearF"
                   v-if="item.state === '4'">
                <!-- 拒绝申请按钮 -->
                <div class="btns">
                  <div class="agree">
                    <van-cell>
                      <button class="close_model"
                              @click="showReject">拒绝申请</button>
                    </van-cell>
                  </div>
                  <!-- 同意退款按钮 -->
                  <div>
                    <van-cell is-link
                              @click="agree"
                              @click-overlay="closeAgreeOverlay">
                      <button class="close_model reject">同意退款</button>
                    </van-cell>
                    <van-popup round
                               v-model="showAgree">
                      <div class="agree_model">
                        <div>退款后不能撤回，优惠券、红包不退还，是否同意该退款申请？</div>
                        <div class="agreeBtns">
                          <button class="cancelAgree"
                                  @click="cancelAgree">取消</button>
                          <button class="sureAgree"
                                  @click="sureAgree">同意</button>
                        </div>
                      </div>
                    </van-popup>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <!-- 底部导航栏 -->
    <div>
      <HomeBottom></HomeBottom>
    </div>

    <!--  商品信息组件 -->
    <goodsInfo :show="goodsShow"
               @hideGoods="hideGoodsPopup"
               :goodsDetailItem="goodsDetailItem" />
    <!-- 关闭交易按钮 -->
    <closeOrder :show="closeOrder"
                :isCloseOrder="isCloseOrderFather"
                @hideOrder="hideOrderPopup" />
  </div>

</template>

<script>
import { getOrderData } from '../../api/order'
import undoneOrders from '../../components/OrdersComponents/undoneOrders.vue'
import goodsInfo from '../../components/OrdersComponents/goodsInfo.vue'
import closeOrder from '../../components/OrdersComponents/closeOrder.vue'
import HomeBottom from '../../components/homepage/HomeBottom.vue'

export default {
  components: {
    undoneOrders,
    goodsInfo,
    closeOrder,
    HomeBottom
  },
  data () {
    return {
      list: [],//接收到的后端数据
      active: 4, // 订单的状态
      deliveryMethod: '1', // 默认外卖配送  1.外卖配送， 2，到店自取
      isCloseOrderFather: '1', // 默认点击的是关闭交易
      tabsList: ['待处理', '未取货', '配送中', '待审核', '全部'],
      orderList: [
        {
          id: '1',
          state: '1',
          username: '欧阳青松先生',
          address: '深证市龙华区名治大道c903',
          time: '18:13',
          personState: '等待顾客付款',
          method: '平台专送',
          person: '张三',
          need: '不需要',
          imgList: [
            {
              id: '1',
              title: '全家桶汉堡包全家桶汉堡包全家桶汉堡包',
              desc: ['大份', '微辣'],
              price: '60',
              num: 'x2',
              weight: '90p',
              zhuliao: '鸡肉',
              sales: '60',
              discount: '9.6折',
              price1: '125P',
              price2: '130P',
              miaoshu: '香辣鸡排汉堡肉质鲜嫩个，外层酥脆，内层多汁',
              taste: '微辣',
              src: 'https://cdn3.axureshop.com/demo/1525603/images/%E6%9C%AA%E5%AE%8C%E6%88%90%E8%AE%A2%E5%8D%95__%E5%BE%85%E5%A4%84%E7%90%86__%E5%B9%B3%E5%8F%B0%E9%85%8D%E9%80%81_/u7026.png'
            },
            {
              id: '2',
              title: '中杯可乐中杯可乐中杯可乐中杯可乐',
              desc: ['中杯', '加冰'],
              price: '24',
              num: 'x2',
              weight: '120p',
              zhuliao: '鸡肉',
              sales: '60',
              discount: '9.6折',
              price1: '125P',
              price2: '130P',
              miaoshu: '香辣鸡排汉堡肉质鲜嫩个，外层酥脆，内层多汁',
              taste: '微辣',
              src: 'https://cdn3.axureshop.com/demo/1525603/images/%E6%9C%AA%E5%AE%8C%E6%88%90%E8%AE%A2%E5%8D%95__%E5%BE%85%E5%A4%84%E7%90%86__%E5%B9%B3%E5%8F%B0%E9%85%8D%E9%80%81_/u7027.png'
            }
          ],
          service: '-6',
          income: '64',
          num2: '121212121212',
          payTime: '09-07 18:03',
          totalPrice: '60',
          fee: '5',
          reduce: '10',
          quan: '10',
          payMoney: '60'
        },
        {
          id: '2',
          state: '2',
          username: '张先生',
          address: '成都市双流区中和街道',
          time: '18:13',
          personState: '等待骑手接单',
          method: '平台专送',
          person: '王四',
          need: '不需要',
          imgList: [
            {
              id: '1',
              title: '单人套餐汉堡包单人套餐汉堡包单人套餐汉堡包单人套餐汉堡包单人套餐汉堡包',
              desc: ['小份', '微辣'],
              price: '28',
              num: 'x1',
              weight: '60p',
              zhuliao: '鸡肉',
              sales: '60',
              discount: '9.6折',
              price1: '125P',
              price2: '130P',
              miaoshu: '香辣鸡排汉堡肉质鲜嫩个，外层酥脆，内层多汁',
              taste: '微辣',
              src: 'https://cdn3.axureshop.com/demo/1525603/images/%E6%9C%AA%E5%AE%8C%E6%88%90%E8%AE%A2%E5%8D%95__%E5%BE%85%E5%A4%84%E7%90%86__%E5%B9%B3%E5%8F%B0%E9%85%8D%E9%80%81_/u7026.png'
            },
            {
              id: '2',
              title: '单人套餐可乐单人套餐可乐单人套餐可乐',
              desc: ['大杯', '正常冰'],
              price: '16',
              num: 'x1',
              weight: '40p',
              zhuliao: '鸡肉',
              sales: '60',
              discount: '9.6折',
              price1: '125P',
              price2: '130P',
              miaoshu: '可乐单人套餐',
              taste: '微辣',
              src: 'https://cdn3.axureshop.com/demo/1525603/images/%E6%9C%AA%E5%AE%8C%E6%88%90%E8%AE%A2%E5%8D%95__%E5%BE%85%E5%A4%84%E7%90%86__%E5%B9%B3%E5%8F%B0%E9%85%8D%E9%80%81_/u7027.png'
            },
            {
              id: '3',
              title: '单人套餐鸡腿堡单人套餐鸡腿堡',
              desc: ['小份', '麻辣'],
              price: '18',
              num: 'x1',
              weight: '50p',
              zhuliao: '鸡肉',
              sales: '60',
              discount: '9.6折',
              price1: '125P',
              price2: '130P',
              miaoshu: '香辣单人套餐鸡腿堡，内层多汁',
              taste: '微辣',
              src: 'https://cdn3.axureshop.com/demo/1525603/images/%E6%9C%AA%E5%AE%8C%E6%88%90%E8%AE%A2%E5%8D%95__%E5%BE%85%E5%A4%84%E7%90%86__%E5%B9%B3%E5%8F%B0%E9%85%8D%E9%80%81_/u7028.png'
            }
          ],
          service: '-8',
          income: '60',
          num2: '121212121212',
          payTime: '09-09 12:03',
          totalPrice: '79',
          fee: '5',
          reduce: '5',
          quan: '10',
          payMoney: '66'
        },
        {
          id: '3',
          state: '3',
          username: '王先生',
          address: '深证市龙华区名治大道c903',
          time: '18:13',
          personState: '骑手配送中',
          method: '平台专送',
          person: '王五',
          imgList: [
            {
              id: '1',
              title: '川味腊肉煲仔饭川味腊肉煲仔饭川味腊肉煲仔饭川味腊肉煲仔饭川味腊肉煲仔饭川味腊肉煲仔饭',
              desc: ['小份', '微辣'],
              price: '88',
              num: 'x2',
              weight: '110p',
              zhuliao: '鸡肉',
              sales: '60',
              discount: '9.6折',
              price1: '125P',
              price2: '130P',
              miaoshu: '香辣川味腊肉煲仔饭川味腊肉煲仔饭',
              taste: '微辣',
              src: 'https://cdn3.axureshop.com/demo/1525603/images/%E6%9C%AA%E5%AE%8C%E6%88%90%E8%AE%A2%E5%8D%95__%E5%BE%85%E5%A4%84%E7%90%86__%E5%B9%B3%E5%8F%B0%E9%85%8D%E9%80%81_/u7026.png'
            },
            {
              id: '2',
              title: '川味腊肉煲仔饭川味腊肉煲仔饭川味腊肉煲仔饭川味腊肉煲仔饭川味腊肉煲仔饭川味腊肉煲仔饭',
              desc: ['小份', '微辣'],
              price: '88',
              num: 'x2',
              weight: '85p',
              zhuliao: '鸡肉',
              sales: '60',
              discount: '9.6折',
              price1: '125P',
              price2: '130P',
              miaoshu: '川味腊肉煲仔饭川味腊肉煲仔饭,内层多汁',
              taste: '微辣',
              src: 'https://cdn3.axureshop.com/demo/1525603/images/%E6%9C%AA%E5%AE%8C%E6%88%90%E8%AE%A2%E5%8D%95__%E5%BE%85%E5%A4%84%E7%90%86__%E5%B9%B3%E5%8F%B0%E9%85%8D%E9%80%81_/u7027.png'
            },
            {
              id: '3',
              title: '川味腊肉煲仔饭川味腊肉煲仔饭川味腊肉煲仔饭川味腊肉煲仔饭川味腊肉煲仔饭川味腊肉煲仔饭',
              desc: ['小份', '微辣'],
              price: '88',
              num: 'x2',
              weight: '95p',
              zhuliao: '鸡肉',
              sales: '60',
              discount: '9.6折',
              price1: '125P',
              price2: '130P',
              miaoshu: '香辣鸡排汉堡肉质鲜嫩个，外层酥脆，内层多汁',
              taste: '微辣',
              src: 'https://cdn3.axureshop.com/demo/1525603/images/%E6%9C%AA%E5%AE%8C%E6%88%90%E8%AE%A2%E5%8D%95__%E5%BE%85%E5%A4%84%E7%90%86__%E5%B9%B3%E5%8F%B0%E9%85%8D%E9%80%81_/u7028.png'
            },
            {
              id: '4',
              title: '川味腊肉煲仔饭川味腊肉煲仔饭川味腊肉煲仔饭川味腊肉煲仔饭川味腊肉煲仔饭川味腊肉煲仔饭',
              desc: ['小份', '微辣'],
              price: '88',
              num: 'x2',
              weight: '125p',
              zhuliao: '鸡肉',
              sales: '60',
              discount: '9.6折',
              price1: '125P',
              price2: '130P',
              miaoshu: '外层酥脆，内层多汁',
              taste: '微辣',
              src: 'https://cdn3.axureshop.com/demo/1525603/images/%E6%9C%AA%E5%AE%8C%E6%88%90%E8%AE%A2%E5%8D%95__%E5%BE%85%E5%A4%84%E7%90%86__%E5%B9%B3%E5%8F%B0%E9%85%8D%E9%80%81_/u7027.png'
            }
          ],
          need: '不需要',
          service: '-6.4',
          income: '67.4',
          num2: '121212121212',
          payTime: '10-07 08:03',
          totalPrice: '98',
          fee: '3',
          reduce: '5',
          quan: '4',
          payMoney: '88'
        },
        {
          id: '4',
          state: '4',
          username: '陈先生',
          address: '深证市龙华区名治大道c903',
          time: '18:13',
          personState: '等待骑手接单',
          method: '平台专送',
          person: '张三',
          imgList: [
            {
              id: '1',
              title: '青椒肉丝麻婆豆腐',
              desc: ['小份', '微辣'],
              price: '188',
              num: 'x6',
              weight: '125p',
              zhuliao: '鸡肉',
              sales: '60',
              discount: '9.6折',
              price1: '125P',
              price2: '130P',
              miaoshu: '青椒肉丝麻婆豆腐',
              taste: '微辣',
              src: 'https://cdn3.axureshop.com/demo/1525603/images/%E6%9C%AA%E5%AE%8C%E6%88%90%E8%AE%A2%E5%8D%95__%E5%BE%85%E5%A4%84%E7%90%86__%E5%B9%B3%E5%8F%B0%E9%85%8D%E9%80%81_/u7026.png'
            },
            {
              id: '2',
              title: '青椒肉丝麻婆豆腐',
              desc: ['小份', '微辣'],
              price: '188',
              num: 'x6',
              weight: '125p',
              zhuliao: '鸡肉',
              sales: '60',
              discount: '9.6折',
              price1: '125P',
              price2: '130P',
              miaoshu: '香辣鸡排汉堡肉质鲜嫩个，外层酥脆，青椒肉丝麻婆豆腐',
              taste: '微辣',
              src: 'https://cdn3.axureshop.com/demo/1525603/images/%E6%9C%AA%E5%AE%8C%E6%88%90%E8%AE%A2%E5%8D%95__%E5%BE%85%E5%A4%84%E7%90%86__%E5%B9%B3%E5%8F%B0%E9%85%8D%E9%80%81_/u7027.png'
            },
            {
              id: '3',
              title: '青椒肉丝麻婆豆腐',
              desc: ['小份', '微辣'],
              price: '188',
              num: 'x6',
              weight: '25p',
              zhuliao: '鸡肉',
              sales: '60',
              discount: '9.6折',
              price1: '125P',
              price2: '130P',
              miaoshu: '香辣鸡排汉堡肉质鲜嫩个，青椒肉丝麻婆豆腐,内层多汁',
              taste: '微辣',
              src: 'https://cdn3.axureshop.com/demo/1525603/images/%E6%9C%AA%E5%AE%8C%E6%88%90%E8%AE%A2%E5%8D%95__%E5%BE%85%E5%A4%84%E7%90%86__%E5%B9%B3%E5%8F%B0%E9%85%8D%E9%80%81_/u7028.png'
            },
            {
              id: '4',
              title: '青椒肉丝麻婆豆腐',
              desc: ['小份', '微辣'],
              price: '188',
              num: 'x6',
              weight: '85p',
              zhuliao: '鸡肉',
              sales: '60',
              discount: '9.6折',
              price1: '125P',
              price2: '130P',
              miaoshu: '香辣鸡排汉堡肉质鲜嫩个，青椒肉丝麻婆豆腐',
              taste: '微辣',
              src: 'https://cdn3.axureshop.com/demo/1525603/images/%E6%9C%AA%E5%AE%8C%E6%88%90%E8%AE%A2%E5%8D%95__%E5%BE%85%E5%A4%84%E7%90%86__%E5%B9%B3%E5%8F%B0%E9%85%8D%E9%80%81_/u7027.png'
            }
          ],
          need: '不需要',
          service: '-8.4',
          income: '97.4',
          num2: '121212121212',
          payTime: '07-07 09:03',
          totalPrice: '127',
          fee: '5',
          reduce: '8',
          quan: '8',
          payMoney: '110'
        }
      ],
      show: false,
      goodsShow: false, // 商品组件显示隐藏
      closeOrder: false,//关闭交易
      showLook: false,//查看发票
      showAgree: false,//同意退款显示隐藏
      showtimeHandle: false,//顾客申请退款处理流程
      goodsDetailItem: {},//商品详情对象存储
      currentPage: 1,//当前页码
      arr: [],// 接收条件筛选后的数组
      pageSize: 5,//每页展示几条数据
    }
  },
  created () {
    this.getUndoneOrder()//获取全部数据
    this.arr = this.orderList
  },
  methods: {
    // 外卖配送切换  父传子
    fatherChange (index) {
      console.log('传给头部组件的', index);
      // 接收头部儿子传的参数 1 、2
      this.deliveryMethod = index
      // 调用请求函数
      // this.getList()
    },

    // 发送全部订单的请求  获取数据
    getUndoneOrder () {
      // 发送请求
      getOrderData({
        orderType: 0,
        currentPage: 1,
        pageSize: 2
      })
        .then((res) => {
          console.log(res);
          this.list = res.data
          console.log(this.list);
        })
        .catch((err) => {
          console.log(err);
        })
    },
    // 订单状态切换   orderType, currentPage, pageSize, orderStatus
    changeTab () {
      console.log(this.active)
      // this.getOrderState(0, 1, 5, 2)
      this.arr = this.orderList.filter(item => {
        if (item.state == +this.active + 1) {
          return item
        }
        if (+this.active + 1 == 5) {
          return item
        }
      })
    },
    // 订单状态切换  orderType, currentPage, pageSize, orderStatus
    getOrderState () {
      // 发送请求
      getOrderData()
        .then((res) => {
          console.log(res)
        })
        .catch((err) => {
          console.log(err);
        })
    },





    // 控制关闭交易的显示
    showPopup () {
      this.isCloseOrderFather = '1'
      this.closeOrder = true;
    },
    // 拒绝申请按钮的显示
    showReject () {
      this.isCloseOrderFather = '2'
      this.closeOrder = true;
    },
    // 查看发票按钮的显示
    showReceipt () {
      this.isCloseOrderFather = '3'
      this.closeOrder = true;
    },
    // 顾客申请退款处理流程
    timeHandle () {
      this.isCloseOrderFather = '4'
      this.closeOrder = true;
    },
    // 订单跟踪地图
    showFollowHandel () {
      this.isCloseOrderFather = '5'
      this.closeOrder = true;
    },
    // 同意退款按钮弹窗
    agree () {
      this.showAgree = true
    },
    // 点击同意退款
    sureAgree () {
      confirm('当前订单状态已经发成改变，请刷新后重试')
      this.showAgree = false
    },
    // 点击取消退款按钮
    cancelAgree () {
      this.showAgree = false
    },
    closeAgreeOverlay () {
      console.log('1')
    },
    // 控制商品详情的显示
    showGoodsPopup (obj) {
      this.goodsShow = true;
      this.goodsDetailItem = obj
      console.log(this.goodsDetailItem);
    },
    // 隐藏商品详情
    hideGoodsPopup (val) {
      console.log("接收商品详情传过来的参数：", val)
      this.goodsShow = val;
    },
    // 隐藏交易订单详情
    hideOrderPopup (val) {
      console.log("接收商品详情传过来的参数：", val)
      this.closeOrder = val;
    },
    // 交易快照
    tradeInfo (obj) {
      console.log(obj);
      this.$router.push({ path: '/tradeInfo', query: { goodList: JSON.stringify(obj) } })
    },
  }
}
</script>

<style scoped lang="scss">
* {
  padding: 0;
  margin: 0;
  // outline: solid red;
}
.content {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
  font-size: 14px;
  // margin: 5px 0px;
  color: rgb(67, 66, 66);
}
.orderList {
  padding-bottom: 65px;
  padding-top: 44px;
}
.orderItem {
  margin-top: 15px;
  background-color: #fff;
  padding: 10px;
}
.orderInfo1 {
  font-size: 12px;
}
.orderInfo1 div {
  margin-top: 10px;
}
.userInfo {
  display: flex;
  justify-content: space-between;
}
.username {
  font-size: 16px;
}
.address {
  font-size: 14px;
  margin: 5px 0px;
  color: rgb(67, 66, 66);
}
.van-icon-location:before,
.van-icon-phone:before {
  font-size: 16px;
  margin: 0px 5px;
}
.order_state {
  display: flex;
  justify-content: space-between;
  margin-top: 25px;
}
.order_time span {
  font-size: 16px;
  margin-right: 5px;
}
.order_state_left {
  height: 60px;
}
.order_state_right {
  width: 75px;
  height: 60px;
  line-height: 60px;
}
.bgc_words {
  margin-top: 10px;
}
.P_bgc {
  display: inline-block;
  background-color: #ff6e53;
  height: 20px;
  line-height: 20px;
  color: #fff;
  margin-right: 5px;
  font-size: 12px;
}
.S_bgc {
  height: 20px;
  line-height: 20px;
  color: #fff;
  margin-right: 5px;
  display: inline-block;
  background-color: #cc9966;
  color: #fff;
  font-size: 12px;
}
.b_word {
  vertical-align: bottom;
}
#follow {
  color: #0066cc;
  font-size: 14px;
}
.imgNum {
  display: flex;
  justify-content: space-between;
}
.imgList {
  display: flex;
}
.imgBox img {
  width: 50px;
  height: 50px;
  border: 1px solid #f5f5f5;
  margin-right: 5px;
}
.imgDot {
  width: 50px;
  height: 50px;
  border: 1px solid #f5f5f5;
  background-color: #fff;
  text-align: center;
  font-size: 30px;
}
.num_icon {
  display: flex;
}
.num,
.n_icon {
  color: #0066cc;
  height: 50px;
  line-height: 50px;
  display: flex;
  font-size: 14px;
}
.receipt,
.service,
.income {
  display: flex;
  justify-content: space-between;
  height: 40px;
  line-height: 40px;
}
.receipt span,
.service span,
.income span {
  display: inline-block;
}

.apply {
  color: #cc0000;
  height: 40px;
  line-height: 40px;
}
.colorIcon {
  color: #efbb4a;
  display: flex;
  height: 35px;
  line-height: 35px;
}
.colorIcon .van-icon-arrow:before {
  height: 40px;
  line-height: 40px;
}
.colorIcon span {
  padding: 3px;
}
.color_icon {
  color: #999;
}
.pinkIcon {
  color: pink;
  margin-top: 10px;
}
.redColor {
  color: #cc0000;
}
.returnMoney {
  display: flex;
  justify-content: space-between;
}
.orderInfo {
  display: flex;
  justify-content: space-between;
}
.orderInfo div {
  margin-top: 8px;
}
.orderInfo span {
  font-size: 12px;
}
.orderInfo_right {
  font-size: 28px;
  color: #0066cc;
  height: 80px;
  line-height: 80px;
}
.receiptInfo {
  display: inline-block;
  width: 40%;
}

.look {
  font-size: 14px;
  color: #0066cc;
  display: inline-block;
  float: right;
}
.receipt .van-icon-arrow:before {
  font-size: 14px;
  color: #0066cc;
  height: 35px;
  line-height: 35px;
}
.van-cell {
  font-size: 16px;
  height: 35px;
  line-height: 35px;
}

.close_model {
  font-size: 14px;
  width: 30%;
  height: 35px;
  line-height: 35px;
  border: 1px solid #efecec;
  border-radius: 5px;
  background-color: #fff;
  float: right;
}

.num .van-icon-arrow:before {
  content: "";
}
.close .van-icon-arrow:before {
  content: "";
}
::v-deep .van-overlay {
  background-color: rgba(0, 0, 0, 0.3);
}
.close_model {
  width: 100px;
}
.van-cell {
  position: "";
}
.btns {
  display: flex;
  float: right;
}
.clearF {
  height: 40px;
  line-height: 40px;
}
.btns .van-icon-arrow:before {
  content: "";
}

.header {
  width: 100%;
  position: fixed;
  z-index: 999;
  top: 0;
}
.undoneOrders {
  margin-top: 50px;
}
::v-deep .van-tabs--line .van-tabs__wrap {
  height: 1.17333rem;
  position: fixed;
  width: 100%;
  z-index: 100;
}
// 退款弹框
.agree_model {
  padding: 15px;
  width: 200px;
  height: 120px;
}
.agreeBtns {
  border-top: 1px solid rgb(202, 201, 201);
}
.agreeBtns button {
  width: 50%;
  background-color: #fff;
  border: none;
  height: 40px;
  line-height: 40px;
}
// 顾客退款剩余时间
.timeHandle {
  font-size: 14px;
  color: #efbb4a;
}
.van-icon-arrow:before {
  line-height: 35px;
}
</style>